<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="$t('circle_activity_22')"></navbar>
        <div class="content-noBottom">
            <div>
                <van-tabs v-model="active" color="#075ebb" title-active-color="#075ebb" @click="selectType">
                    <van-tab :title="$t('circle_activity_1')"></van-tab>
                    <van-tab :title="$t('circle_activity_2')"></van-tab>
                    <van-tab :title="$t('circle_activity_3')"></van-tab>
                    <van-tab :title="$t('circle_activity_4')"></van-tab>
                </van-tabs>
            </div>
            <div style="height: calc(100vh - 100px);" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getActivityByWcId"
                    style="padding-bottom: 56px;"
                    >
                        <div v-bind:class="{'height100' : total === 0}" class="activity-list">
                            <router-link :to="`/circle/activityDetail/${item.wcaId}`" v-for="item in list" :key="item.wcaId">
                                <div class="activity-item">
                                    <div class="activity-title">{{ item.wcaTheme }}</div>
                                    <div class="activity-content">
                                        <div>{{ $t('circle_activity_5') }}：<span>{{ $t('circle_activity_6', {'value1': item.wcaStartDatetime, 'value2': item.wcaEndDatetime}) }}</span></div>
                                        <div>{{ $t('circle_activity_7') }}：<span>{{ item.wcaLocale }}</span></div>
                                        <div>{{ $t('circle_activity_25') }}：<span>{{ item.wcaCreateDatetime | dateHandle}}</span></div>
                                    </div>
                                    <div class="activity-info">
                                        <div>
                                            <span class="activity-status" v-if="item.status === 'ENROLLING'">{{ $t('circle_activity_8') }}</span>
                                            <span class="activity-status activity-status-1" v-else-if="item.status === 'ONGOING'">{{ $t('circle_activity_2') }}</span>
                                            <span class="activity-status activity-status-2" v-else>{{ $t('circle_activity_9') }}</span>
                                            <span class="activity-count">{{ item.enrollPeopleCount }}<span>/{{ $t('circle_activity_10', {'value': item.wcaPeopleCount}) }}</span></span>
                                        </div>
                                        <div class="activity-create">
                                            {{ item.authorName }}
    <!--                                        <span class="activity-count">{{ item.enrollPeopleCount }}<span>/{{ $t('circle_activity_10', {'value': item.wcaPeopleCount}) }}</span></span>-->
                                        </div>
                                    </div>
                                </div>
                            </router-link>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import { Tab, Tabs } from 'vant';
export default {
    name: 'Activity',
    components: {
        vanTab: Tab,
        vanTabs: Tabs
    },
    data() {
        return {
            active: 0,
            total: 0,
            isTop: false,
            pageNo: 0,
            list: [],
            isLoading: false,
            finished: false,
            isRefresh: false
        };
    },
    filters: {
        dateHandle(value) {
            let date = value.split(' ');
            return date[0];
        }
    },
    methods: {
        selectType() {
            this.pageNo = 1;
            this.list = [];
            this.onFetching = false;
            this.isLoading = true;
            this.getActivityByWcId();
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getActivityByWcId('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getActivityByWcId(option) {
            let condition;
            switch (this.active) {
            case 0:
                condition = 'all';
                break;
            case 1:
                condition = 'ONGOING';
                break;
            case 2:
                condition = 'INITIATED';
                break;
            case 3:
                condition = 'INVOLVED';
                break;
            }
            this.$axios.get(`/app/api/trainee/work-circle/activity/page/${this.$route.params.wcId}`, {
                params: {
                    pageNo: this.pageNo,
                    condition: condition
                }
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.list = res.data.results;
                    } else {
                        this.list = [...this.list, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.list.length >= this.total) {
                    this.finished = true;
                }
            });
        }
    },
    created() {
        this.isLoading = true;
        this.onPulldownTop();
    }
};
</script>

<style scoped lang="less">
    .activity-list {
        .activity-item {
            padding: 15px 15px;
            background: #fff;
            margin-bottom: 10px;
            &:first-child {
                margin-top: 10px;
            }
            .activity-title {
                font-weight: 200;
                font-size: 14px;
                color: #000;
                margin-bottom: 10px;
            }
            .activity-content {
                font-size: 10px;
                color: #ACACAC;
                &>div {
                    margin-bottom: 8px;
                }
                &>div:last-child {
                    margin-bottom: 0;
                }
                &>div>span {
                    color: #797979;
                }
                margin-bottom: 20px;
            }
            .activity-info {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 10px;
                .activity-count {
                    color: #797979;
                    &>span {
                        color: #ACACAC;
                    }
                }
                .activity-create {
                    color: #ACACAC;
                }
                .activity-status {
                    background: #00BA5F;
                    color: #fff;
                    line-height: 26px;
                    display: inline-block;
                    border-radius: 13px;
                    padding: 0 10px;
                }
                .activity-status-1 {
                    background: #FDB834;
                }
                .activity-status-2 {
                    background: #CCCCCC;
                }
            }
        }
    }
</style>
